<template>
  <div>
    <button @click="fn1">找到dom元素</button>
    <button @click="fn2">找到组件对象</button>

    <!-- 找到你想找到的dom元素，给它用ref起一个名字 -->
    <h1 ref="first">我是App.vue</h1>
    <div ref="box">我是div</div>

    <!-- 组件 -->
    <my-goods ref="goods" title="猪脚饭" price="12" desc="随便"/>

    <hr>

    <!-- 以下是学习$nextTick -->
    <!-- v-if特点：懒加载，如果没显示，就没有创建这个标签 -->
    <input ref="txt" v-if="txtShow" type="text">
    <button v-else @click="login">登录</button>
  </div>
</template>

<script>
// 导入组件
import MyGoods from "./components/MyGoods";
export default {
  // 注册组件
  components: {
    MyGoods,
  },
  data() {
    return {
      txtShow: false
    }
  },

  methods: {
    async login () {
      // 显示出输入框
      // 虽然说页面一打开时没有输入框
      // 但是你下面这句话不是把输入框显示出来了吗？？那照理说应该有输入框了呀
      // 因为在vue中dom渲染是异步的，所以你下面这句话仅仅只是暂时把数据txtShow改成了true
      // 但是dom还没有进行渲染
      this.txtShow = true
      // 让输入框获得焦点 -- 如何让一个dom元素获得焦点？
      // dom元素.focus()
      // console.log(this.$refs.txt)
      // this.$refs.txt.focus()

      // 急切的需要一个解决办法
      // dom渲染是异步的，所以我可以想办法，让我的代码也变异步，就能找到了
      // setTimeout(() => {
      //   console.log(this.$refs.txt)
      // }, 500);
      // 虽然用setTimeout可以，但是这个时间写多少好呢？不方便！

      // 所以我们需要另外一种方式：
      // 一定会等下一次dom更新完毕才会调用的方式
      // 有：$nextTick
      // this.$nextTick( () => {
      //   // 这个回调函数就会在下次dom更新后立即调用
      //   // console.log(this.$refs.txt)
      //   this.$refs.txt.focus()
      // } )

      // 上面的$nextTick是回调函数的写法，其实$nextTick还有Promise的写法
      // this.$nextTick()
      // .then( () => {
      //   this.$refs.txt.focus()
      // } )

      // 如果用Promise的写法一般不会用.then，而是用async + await
      await this.$nextTick()
      // await这后面的代码就相当于上面写的.then
      // 也就是说从这里开始，已经是下一次dom更新后才来执行的了
      this.$refs.txt.focus()
    },
    fn1 () {

      // 在vue中不推荐使用这种方式找dom
      // const h1 = document.querySelector('h1')
      // h1.innerHTML = '我改内容'

      // ref的形式既可以找dom对象，还可以找到组件对象
      console.log(this.$refs.first)
      console.log(this.$refs.box)
      this.$refs.box.innerHTML = '我是改完后的div内容'
    },

    fn2 () {
      // 找到组件对象
      // 找到的组件对象，相当于是这个组件内部的this
      // console.log( this.$refs.goods )
      // 相当于有个妙用：可以快速的父传子
      this.$refs.goods.msg = '我是新改的msg值'
      // 妙用2：可以快速的调用子组件内部的方法
      this.$refs.goods.test()
    }
  
  }
};
</script>

<style>
</style>